<template>
  <div class="singer-intro">
    <div>
      <h2>简介</h2>
      <div>{{ desc }}</div>
    </div>
    <div>
      <h2>基本资料</h2>
      <div>
        <div v-for="(item, index) in basicItem" :key="index">
          <span>{{ item.key }}</span>
          <span style="white-space: pre-wrap">{{ item.value }}</span>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in otherItem" :key="index">
      <h2>{{ item.key }}</h2>
      <div style="white-space: pre-wrap">{{ item.value }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["singeid"],
  data() {
    return {
      desc: "", //简介描述
      basicItem: [], //基本资料
      otherItem: [], //其他(从艺历程和荣誉记录)
    };
  },
  created() {
    // console.log(this.singeid)
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/singer/desc?singermid=" + this.singeid).then((res)=>{
          // console.log(res);
          this.desc = res.data.desc;
          this.basicItem = res.data.basic.item;
          this.otherItem = res.data.other.item;
        }
      );
    },
  },
};
</script>
<style scoped>
.singer-intro {
  text-align: left;
  padding: 0 1rem;
}
</style>